<script setup lang="ts">
import type { Fullscreen } from '@/components/LayoutForm/src/type'
import Preview from './preview.vue'
// import { FullScreen } from '@element-plus/icons-vue'

const emit = defineEmits(['cancelSelect'])
function handleCancelSelect() {
  emit('cancelSelect')
}
const { handleFullscreen } = inject('fullscreen') as Fullscreen

const previewRef = ref<InstanceType<typeof Preview>>()
</script>

<template>
  <div class="header-bar">
    <ElSpace class="ml-auto">
      <ElButton
        size="small"
        style="margin-left: 10px" type="primary" plain
        @click="handleCancelSelect"
      >
        取消选中
      </ElButton>
      <ElButton
        size="small"
        style="margin-left: 10px" type="primary"
        @click="previewRef?.onOpen"
      >
        <template #icon>
          <el-icon>
            <View />
          </el-icon>
        </template>
        预览
      </ElButton>
      <ElButton
        size="small"
        style="margin-left: 10px" type="primary"
        @click="previewRef?.onOpen"
      >
        <template #icon>
          <el-icon>
            <Position />
          </el-icon>
        </template>
        保存
      </ElButton>
      <ElButton
        size="small"
        style="margin-left: 10px" type="primary"
        @click="handleFullscreen"
      >
        <template #icon>
          <el-icon>
            <FullScreen />
          </el-icon>
        </template>
        全屏
      </ElButton>
    </ElSpace>
    <Preview ref="previewRef" />
  </div>
</template>

<style>
.header-bar {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #e4e7ed;
  position: absolute;
  left: 20px;
  right: 20px;
  padding: 0 20px;
  top: 0;
}
</style>
